<template>
    <div>
        <el-table
                :data="tableData"
                border
                style="width: 70%">
            <el-table-column
                    fixed
                    prop="id"
                    label="编号"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="author"
                    label="作者"
                    width="150">
            </el-table-column>

            <el-table-column
                    fixed="right"
                    label="操作"
                    width="320">
                <template slot-scope="scope">
                    <el-button @click="edit(scope.row)" type="text" size="small">修改</el-button>
                    <el-button @click="deleteBook(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-main>
            <el-pagination
                    background
                    layout="prev, pager, next"
                    page-size="6"
                    :total="total"
                    @current-change="page">
            </el-pagination>
        </el-main>
    </div>
</template>

<script>
    export default {
        methods: {
            edit(row) {
                this.$router.push({
                    path: '/BookUpdate',
                    query:{
                        id:row.id,
                    }
                })
            },
            deleteBook(row){
                const _this=this;
                axios.delete('http://localhost:8181/book/deleteById/'+row.id).then((res=>{
                    _this.$alert('《'+row.name+'》删除成功', '恭喜你',{
                        confirmButtonText: '确定',
                        callback: action => {
                            location.reload();
                        }
                    })
                }))
            },
            page(currentPage){
                const _this=this;             /* 不能直接调this，此时this指这个函数，不是全局的this，所以重新赋值*/
                axios.get('http://localhost:8181/book/findAll/'+currentPage+'/6').then((res)=>{
                    _this.tableData=res.data.content;
                    _this.total=res.data.totalElements;
                })
            }
        },
        created(){
            const _this=this;             /* 不能直接调this，此时this指这个函数，不是全局的this，所以重新赋值*/
          axios.get("http://localhost:8181/book/findAll/1/6").then((res)=>{
              _this.tableData=res.data.content;
              _this.total=res.data.totalElements;
          })
        },
        data() {
            return {
                total : '',
                tableData: [{
                    id: '1',
                    name: '解忧杂货店',
                    author: '东野圭吾',

                },
                ]
            }
        }
    }
</script>